<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>控制台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" href="__CSS__/oksub.css">
    <script type="text/javascript" src="__LIB__/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="__LIB__/echarts/world/js/province/neimenggu.js"></script>
</head>
<body>
<div class="ok-body console">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="ibms-console-card">
                <div class="ibms-console-card-num">{$count.icafe.num}</div>
                <div class="ibms-console-cart-text">{$count.icafe.text}</div>
                <i class="layui-icon layui-icon-app ibms-console-card-icon"></i>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="ibms-console-card">
                <div class="ibms-console-card-num">{$count.user.num}</div>
                <div class="ibms-console-cart-text">{$count.user.text}</div>
                <i class="layui-icon layui-icon-user ibms-console-card-icon"></i>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="ibms-console-card">
                <div class="ibms-console-card-num">{$count.staff.num}</div>
                <div class="ibms-console-cart-text">{$count.staff.text}</div>
                <i class="layui-icon layui-icon-service ibms-console-card-icon"></i>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
            <div class="ibms-console-card">
                <div class="ibms-console-card-num">{$count.staffdept.num}</div>
                <div class="ibms-console-cart-text">{$count.staffdept.text}</div>
                <i class="layui-icon layui-icon-template-1 ibms-console-card-icon"></i>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md4">
            <div class="layui-card ibms-card">
                <div class="layui-card-header">区域分布</div>
                <div class="layui-card-body">
                    <div id="eChartArea" style="height: 360px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
            <div class="layui-card ibms-card">
                <div class="layui-card-header">场所类型</div>
                <div class="layui-card-body">
                    <div id="eChartCate" style="height: 360px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
            <div class="layui-card ibms-card">
                <div class="layui-card-header">呼和浩特辖区</div>
                <div class="layui-card-body">
                    <div id="eChartHhht" style="height: 360px;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12">
            <div class="layui-card ibms-card">
                <div class="layui-card-header">开发信息</div>
                <div class="layui-card-body">
                    <table class="layui-table layui-text">
                        <thead>
                        <tr>
                            <th>项目名称</th>
                            <th>开发人员</th>
                            <th>公司</th>
                            <th>地址</th>
                            <th>联系电话</th>
                            <th>版本</th>
                            <th>发布日期</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>{$ibms.name}</td>
                            <td>{$ibms.author}</td>
                            <td>{$ibms.company}</td>
                            <td>{$ibms.address}</td>
                            <td>{$ibms.telephone}</td>
                            <td>{$ibms.version}</td>
                            <td>{$ibms.date}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12">
            <div class="layui-card ibms-card">
                <div class="layui-card-header">服务器信息</div>
                <div class="layui-card-body">
                    <table class="layui-table layui-text">
                        <tbody>
                        <tr>
                            <td class="layui-table-header" style="width: 15%;">操作系统</td>
                            <td  style="width: 35%;">{$server.server_os}</td>
                            <td class="layui-table-header" style="width: 15%;">运行环境</td>
                            <td  style="width: 35%;">{$server.server_env}</td>
                        </tr>
                        <tr>
                            <td class="layui-table-header">PHP版本</td>
                            <td>{$server.php_version}</td>
                            <td class="layui-table-header">运行方式</td>
                            <td>{$server.php_sapi}</td>
                        </tr>
                        <tr>
                            <td class="layui-table-header">MySQL版本</td>
                            <td>{$server.mysql_version}</td>
                            <td class="layui-table-header">最大执行时间</td>
                            <td>{$server.execution_time}</td>
                        </tr>
                        <tr>
                            <td class="layui-table-header">ThinkPHP版本</td>
                            <td>{$server.think_version}</td>
                            <td class="layui-table-header">允许内存大小</td>
                            <td>{$server.memory_limit}</td>
                        </tr>
                        <tr>
                            <td class="layui-table-header">根目录</td>
                            <td>{$server.document_root}</td>
                            <td class="layui-table-header">文件上传限制</td>
                            <td>{$server.max_filesize}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="__LIB__/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(["jquery", "okUtils"], function () {
        let $ = layui.jquery;
        let okUtils = layui.okUtils;

        okUtils.ajax("{:url('getEchartData')}").done(function (response) {
            let data = response.data;

            // echart配置：区域分布
            let option_area = {
                // title: {
                //     text: '内蒙古自治区',
                //     subtext: '',
                // },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c}'
                },
                visualMap: {
                    type: 'piecewise',
                    left: 'left',
                    top: 'top',
                    pieces: [
                        {gt: 200},
                        {gt: 100, lte: 200},
                        {gt: 50, lte: 100},
                        {gt: 20, lte: 50},
                        {gt: 10, lte: 20},
                        {gt: 5, lte: 10},
                        {gt: 0, lte: 5}
                    ],
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    }
                },
                series: [
                    {
                        name: '',
                        type: 'map',
                        map: '内蒙古',
                        roam: true,
                        data: data.area_data
                    }
                ]
            };
            // echart配置：场所类型
            let option_cate = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'horizontal',
                    left: 'left',
                    data: data.icafecate
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['35%', '75%'],
                        center: ['50%', '55%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '23',
                                fontWeight: 'bold'
                            },
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: data.cate_data
                    }
                ]
            };
            // echart配置：呼和浩特地区
            let option_hhht = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'horizontal',
                    left: 'left',
                    data: data.district
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: [0, '60%'],
                        center: ['50%', '62%'],
                        label: {
                            show: true,
                            formatter: '{b}\n{d}%'
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        data: data.hhht_data,
                        itemStyle: {
                            color: function(params) {
                                //自定义颜色
                                let colorList = [
                                    '#95a2ff', '#fa8080', '#ffc076', '#3cb9fc',
                                    '#87e885', '#fae768', '#73abf5', '#cb9bff',
                                    '#434348', '#90ed7d', '#f7a35c', '#8085e9'
                                ];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                ]
            };

            // 初始化echart
            let echart_area = echarts.init($('#eChartArea')[0]);
            let echart_cate = echarts.init($('#eChartCate')[0]);
            let echart_hhht = echarts.init($('#eChartHhht')[0]);
            echart_area.setOption(option_area);
            echart_cate.setOption(option_cate);
            echart_hhht.setOption(option_hhht);

            // 宽度自适应
            okUtils.echartsResize([echart_area, echart_cate, echart_hhht]);
        }).fail(function (error) {
            // console.log(error)
        });
    })
</script>